<template>
	<view class="container">
		<!-- <phone-search-list :phones="citylist" @paramClick="selectCity"></phone-search-list>
		<view class="position-city">
			<u-icon name="/static/icon_dw_20.png" size="30"></u-icon>
			<text v-if="getLocationcity!=''">{{getLocationcity}}</text>
			<text v-else class="positing">正在定位...</text>
		</view>
		<view class="history-city" v-if="historyVisits.length>0">
			<text class="history-title">历史访问</text>
			<view class="history-city-item" :class="{'linefrist':(historyindex+1)%3==1}" v-for="(historyitem,historyindex) in historyVisits" :key="historyindex">
				<text>{{historyitem|getsubCityname}}</text>
			</view>
		</view>
		<view class="county-sites" v-if="countrySites.length>0">
			<view class="county-sites-top">
				<text class="county-sites-title">全国分站</text>
				<view class="county-sites-morebtn">
					<text>更多</text>
					<u-icon name="/static/icon_xl_62.png" size="25"></u-icon>
				</view>
			</view>
			<view class="county-site-item" v-for="(siteitem,siteindex) in countrySites" :key="siteindex" :class="{'linefrist':(siteindex+1)%3==1}">
				<text>{{siteitem}}</text>
			</view>
		</view> -->
		<view class="citys-indexlist">
			<!-- <phone-directory :phones="citylist" @paramClick="selectCity"></phone-directory> -->
			 <city-select
			            @cityClick="cityClick"
			            :formatName="formatName"
			            :activeCity="activeCity"
			            :hotCity="hotCity"
			            :obtainCitys="obtainCitys"
			            :isSearch="true"
			            ref="citys"
			        ></city-select>
		</view>
	</view>
</template>

<script>
	import Citys from '@/components/city.json';
	import phoneDirectory from '@/components/phone-directory/phone-directory.vue';
	import phoneSearchList from '@/components/phone-directory/phone-search-list.vue';
	import citySelect from "@/components/city-select/city-select.vue"
	import {getAreas} from '@/apis/request.js';
	export default {
		components:{
		   phoneDirectory,
		   phoneSearchList,
		   citySelect
		},
		data() {
			return {
				obtainCitys:Citys.data,
				getLocationcity:'',
				historyVisits:[],
				countrySites:[],
				 formatName: 'name',
				  hotCity: [
				     {
				         id: 0,
				         name: '南京市'
				     },
				     {
				         id: 1,
				         name: '南京市'
				     }
				    ],
				activeCity: {
				                id: 1,
				                name: '南京市'
				            },
				
			}
		},
		created() {
			console.log(Citys)
			// this.getDiZhi();
			uni.getLocation({
				type:'gcj02',
				altitude:true,
				geocode:true,
				success:(res_locationinfo)=>{
					this.getLocationcity=res_locationinfo.address.city;
				},
			});
			if(uni.getStorageSync('historyVisits')){
				this.historyVisits=uni.getStorageSync('historyVisits');
			}
		},
		methods: {
			cityClick(e){
				console.log(e)
				uni.setStorageSync('selectCity',e);
				uni.navigateBack({
					delta:1
				});
			},
			selectCity(e){
				
				for(const historyitem of this.historyVisits){
					if(historyitem==e.name){
						
						return ;
					}
				}
				this.historyVisits.unshift(e.name);
				if(this.historyVisits.length>3){
					this.historyVisits.pop();
				}
				uni.setStorageSync('historyVisits',this.historyVisits);
				uni.navigateBack({
					delta:1
				});
			}
		},
		filters:{
			getsubCityname(val){
				if(val.length < 5){
					return val;
				}else {
					return `${val.substr(0,4)}...`;
				}
			}
		}
	}
</script>

<style lang="scss">
    page{
		width: 100%;
		height: 100%;
	}
	.container{
		width: 100%;
		min-height: 100%;
		.search-view{
			width: 680rpx;
			height: auto;
			margin: auto;
			margin-top: 10rpx;
		}
		.position-city{
			width: 680rpx;
			height: auto;
			margin: auto;
			display: flex;
			margin-top:50rpx;
			text{margin-left: 10rpx;}
			align-items: center;
		}
		.history-city{
			width: 680rpx;
			margin: auto;
			margin-top: 50rpx;
			height: auto;
			display: flex;
			flex-wrap: wrap;
			.history-title{width: 100%;font-size: 30rpx;color: #222;margin-bottom: 15rpx;}
			.history-city-item{width: 210rpx;height: 75rpx;display: flex;background-color: rgba(246, 247, 251, 1);font-size: 27rpx;justify-content: center;align-items: center;margin-left: 25rpx;margin-top: 20rpx;border-radius: 10rpx;}
		    .linefrist{margin-left: 0rpx;}
		}
		.county-sites{
		    width: 680rpx;
			margin: auto;
			height: auto;
			margin-top: 30rpx;
			display: flex;
			flex-wrap: wrap;
			.county-sites-top{display: flex;justify-content: space-between;width: 100%;height: auto;align-items: center;margin-bottom: 15rpx;}
			.county-sites-title{
				font-size: 30rpx;
				color: #222;
			}
			.county-sites-morebtn{
				display: flex;
				color: #ccc;
				font-size: 25rpx;
				text{margin-right: 10rpx;}
			}
			.county-site-item{
				background-color: rgba(246, 247, 251, 1);
				width: 210rpx;
				height: 75rpx;
				display: flex;
				font-size: 27rpx;
				justify-content: center;
				align-items: center;
				margin-top: 20rpx;
				margin-left: 25rpx;
			}
			.linefrist{margin-left: 0rpx;}
		}
		.citys-indexlist{
			width:100%;
			height: auto;
			margin: auto;
		}
		.positing{
			font-size: 25rpx;
		    color: #ccc;
		}
	}
</style>
